<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>Pager - ESUI Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/google-code-prettify/prettify.css" />
    <link rel="stylesheet" href="assets/themes/standard.css" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="assets/ie8.css" />
    <![endif]-->
</head>
<body>
    <div class="header">
        <h1 id="branding">ESUI - Pager</h1>
    </div>
    <div class="ui-g main-container">
        <div id="side-bar" class="ui-u-1-5">
            <ul id="navigator" class="ui-nav">
            </ul>
        </div>
        <div id="main" class="ui-u-4-5">
            <h2>Pager</h2>
            <div class="intro">
                <p>基本Pager。</p>
            </div>
            <div class="example ui-demo-light-stage">
                <div data-ui="type:Pager;id:test;"></div>
                <br /> <br />
                <div data-ui-id="test1" data-ui-type="Pager"></div>
                <br /> <br />
                <div id="message"></div>
                <div id="pager-dynamic"></div>
            </div>
        </div>
    </div>
    <script src="assets/loader/esl.js"></script>
    <script src="config.js"></script>
    <script src="demo.js"></script>
    <script src="assets/google-code-prettify/prettify.js"></script>
    <script id="main-js">
    require(
            [
                'esui',
                'esui/Pager',
                'esui/Tab',
                'demo'
            ],
            function (ui, Pager) {
                var url = location.href;
                var params = url.split('?');
                if (params.length > 1) {
                    params = params[1].split('&');
                    var page = 1;
                    var pageSize = 20;
                    for (var i = 0, len = params.length; i < len; i++) {
                        var param = params[i].split('=');
                        var key = param[0];
                        var value = param[1];
                        if (key === 'page') {
                            page = parseInt(value, 10);
                        }
                        else if (key === 'pageSize') {
                            pageSize = parseInt(value, 10);
                        }
                    }
                }
                var pager = ui.init()[0];

                pager.set('pageType', 'plain');

                pager.set('count', 260);
                if (page) {
                    pager.set('page', page);
                }
                else {
                    pager.set('page', 10);
                }
                pager.set('backCount', 4);
                pager.set('forwardCount', 4);
                pager.set('backName', '←');
                pager.set('forwardName', '→');
                pager.set('pagePattern', 'fullPattern');
                setTimeout(function () {
                    pager.setProperties({
                        pageSizes: [13, 21, 101]
                    });
                }, 3000);

                setTimeout(function () {
                    pager.setProperties({
                        pageSizes: []
                    });
                }, 4000);

                setTimeout(function () {
                    pager.setProperties({
                        pageSizes: [1, 13, 20, 101]
                    });
                }, 5000);

                setTimeout(function () {
                    if (pageSize) {
                        pager.setProperties({
                            pageSize: pageSize
                        });
                    }
                    else {
                        pager.setProperties({
                            pageSize: 20
                        });
                    }
                }, 2000);

                pager.set('urlTemplate', 'Pager.html?page=${page}&pageSize=${pageSize}');

                pager.set('layout', 'something');


                pager.onchangepage = function () {
                    document.getElementById('message').innerHTML += '<p>Change page to ' + this.get('page') + '</p>';
                };

                pager.onchangepagesize = function () {
                    document.getElementById('message').innerHTML
                    += '<p>Change page size to ' + this.get('pageSize') + '</p>';
                };
                var pager3 = new Pager({
                        main: document.getElementById('pager-dynamic'),
                        pageSizes: [],
                        count: 260,
                        pageSize: 3
                    }
                );
                pager3.render();
            }
    );
</script>
<script src="sitemap.js"></script>
</body>
</html>
